<template>
  <div>
    <div v-if="isShow">
      <div id="div1">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="con" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="get()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div id="div2">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="add">新增角色</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData"
          border
          style="width: 95%; height: 70%"
          :header-cell-style="{ background: '#f3f3f3' }"
        >
          <el-table-column prop="id" label="角色编号" width="150">
          </el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="200">
          </el-table-column>
          <el-table-column prop="description" label="角色说明"> </el-table-column>
          <el-table-column label="操作" width="350">
            <template>
              <el-button type="text" size="medium" @click="get22(scope.row)"
                >查看</el-button
              >
              <el-button type="text" size="medium" @click="modify_admin2(scope.row)"
                >修改</el-button
              >
              <el-button type="text" size="medium" @click="del(scope.$index, tableData)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="limit"
            :total="total"
            @current-change="change"
            @prev-click="prev"
            @next-click="next"
          >
          </el-pagination>
        <!-- 查看信息 -->
        <el-dialog width="40%" title="查看信息" :visible.sync="check">
          <el-form :model="from">
            <el-form-item label="角色编号" :label-width="'100'">
              <el-input
                disabled
                v-model="from.id"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色名称" :label-width="'100'">
              <el-input
                disabled
                v-model="from.roleName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色说明" :label-width="'100'">
              <el-input
                disabled
                v-model="from.description"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="check = false">取 消</el-button>
            <el-button type="primary" @click="check = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 修改信息 -->
        <el-dialog width="40%" title="修改信息" :visible.sync="modify">
          <el-form :model="from">
            <el-form-item label="角色名称" :label-width="'100'">
              <el-input
                v-model="from.roleName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色说明" :label-width="'100'">
              <el-input
                v-model="from.description"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modify = false">取 消</el-button>
            <el-button type="primary" @click="modify = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      con: "",
      page: 1,
      limit: 5,
      total: 0,
      isShow: true,
      modify: false,
      check: false,
      tableData: [],
      //查看里面的内容
      from:{
          Rolenum: "",
          Rolename: "",
          Roledes: "",
      },
    };
  },
  methods: {
    //查询
    get() {
      // this.$axios({
      //   url:'',
      //   method:"/post",
      //   data:{

      //   }
      // }).then((res)=>{
      //   this.tableData=res.data.data
      // })
    },
    //新增角色
    add() {
      this.isShow = !this.isShow;
      this.$router.push("/Company/AddSystemManagement");
    },
    //页面渲染页码
    getCon() {
      this.$axios({
        url: "/role/list",
        method:"post",
        data: {
          page: this.page,
          limit: this.limit,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.tableData = res.data.data;
        this.total = res.data.count
      });

    },
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    //修改
    // modify(){
    //     //editBox = false
    //     this.$axios({
    //         url:'/edit',
    //         method:'post',
    //         data:{
    //             con:this.editData.con,
    //             id:this.editData.id
    //         }
    //     }).then((res)=>{
    //         if(res.data.code == 500){

    //         }else{
    //             this.$message.success('修改成功');
    //             this.editBox = false;
    //             this.getCon();
    //         }
    //     })
    // },
    //删除
    del() {
      this.$confirm("此操作将删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted(){
    this.getCon();
    sessionStorage.setItem('fName','SystemManagement')
  }
};
</script>
<style lang="less" scoped>

.el-pagination {
  margin-top: 20px;
  float: right;
}
#div1 {
  width: 90%;
  height: 60px;
  background: #f7f7f7;
  .el-form-item {
    padding: 10px 20px;
  }
}
#div2 {
  width: 90%;
  height: 500px;
  margin-top: 30px;
  background: #f7f7f7;
  .el-form-item {
    padding: 10px 20px;
  }
  .el-table {
    margin-left: 20px;
    // .el-table td, .el-table th{
    //   text-align: center !important;
    // }
  }
}
</style>